<template>
	<!-- 取消之前的 确认发货 -->
	<view class="">

		<view class="delivery-courier">
			<view class="popup-add-box">
				<uni-forms disabled ref="baseForm" label-width="200rpx" label-align='right' :modelValue="orderFrom">
					<uni-forms-item label="发货单号" required>
						<uni-easyinput :clearable='false' v-model="orderFrom.deliveryNo" placeholder="请输入发货单号" />
					</uni-forms-item>
					<uni-forms-item label="发货日期" required>
						<uni-datetime-picker :clear-icon="false" type="datetime" return-type="timestamp"
							v-model="orderFrom.deliveryTime" />
					</uni-forms-item>

					<uni-forms-item label="发货方式" required>
						<uni-data-select :clear='false' v-model="orderFrom.deliveryType" :localdata="deliveryTypeRange"
							placeholder="请选择发货方式"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="发货人" required>
						<!-- <uni-data-select v-model="orderFrom.deliveryUserName" :localdata="deliveryUserNameRange"
							placeholder="请选择发货人"></uni-data-select> -->
						<uni-easyinput :clearable='false' v-model="orderFrom.deliveryName" placeholder="请选择发货人" />
					</uni-forms-item>
					<uni-forms-item label="客户名称" required>
						<uni-easyinput :clearable='false' v-model="orderFrom.extractName" placeholder="请输入发货单号" />
					</uni-forms-item>
					<uni-forms-item label="销售订单号" required>
						<uni-easyinput :clearable='false' v-model="orderFrom.orderNo" placeholder="请输入销售订单号" />
					</uni-forms-item>
					<uni-forms-item label="订单总金额" required>
						<uni-easyinput :clearable='false' v-model="orderFrom.orderPrice" placeholder="请输入订单总金额" />
					</uni-forms-item>
					<uni-forms-item label="优惠总金额" required>
						<uni-easyinput :clearable='false' v-model="orderFrom.couponMoney" placeholder="请输入优惠总金额" />
					</uni-forms-item>
					<uni-forms-item label="优惠总金额" required>
						<uni-easyinput :clearable='false' disabled v-model="orderFrom.deliveryTotalAmount"
							placeholder="优惠总金额" />
					</uni-forms-item>
					<uni-forms-item v-if="orderFrom.status" label="审核状态" required>
						<uni-data-select :clear='false' v-model="orderFrom.status"
							:localdata="statusList"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="发货总金额" required>
						<uni-easyinput :clearable='false' disabled v-model="orderFrom.deliveryBeforeAmount"
							placeholder="发货总金额" />
					</uni-forms-item>
					<uni-forms-item label="扣减补位金额" required>
						<uni-easyinput :clearable='false' disabled v-model="orderFrom.depositOutPrice"
							placeholder="扣减补位金额" />
					</uni-forms-item>
					<uni-forms-item label="本次发货总金额" required>
						<uni-easyinput :clearable='false' disabled v-model="orderFrom.deliveryAmount"
							placeholder="本次发货总金额" />
					</uni-forms-item>
				</uni-forms>
				<uni-section title="发货单明细" type="line">
					<uni-list>
						<uni-list-item thumb-size="lg" v-for="(val,index) in orderFrom.deliveryDetailList" :key="index">
							<template v-slot:body>
								<view class="slot-box">
									<view class="slot-box-left">
										<img :src="val.imagePath" alt="" />
									</view>
									<view class="slot-box-right">
										<text class="slot-text">商品名称：{{val.productName}}</text>
										<text class="slot-text">
											商品规格：
											<!-- <template v-if="val.sendType == '40'">
												<span
													v-for="(item, index) in val.productAttr && ((val.productAttr.split(';')).splice(0, 2))"
													:key="index">
													{{ item.split(":")[0] + ':' }}
													<uni-tag :inverted="true" :text='item.split(" :")[1]'
														type="primary" />
												</span>
												<span style="display: block;margin: 2px 0px;">颜 色：<uni-tag
														style="margin: 0 2px;" :key="_index"
														v-for="(cor,_index) in val.colorList"
														@click="tagClick(val, cor)" :inverted="false" :text="cor.color"
														:type="cor.check && 'primary'"></uni-tag></span>
											</template> -->
											<span>{{val.productAttr}}</span>
										</text>
										<text class="slot-text">商品价格：￥{{val.productAmount}}</text>
										<text class="slot-text">购买数量：{{val.totalNum}}</text>
										<text class="slot-text">总 价：￥{{val.totalAmount}}</text>
										<text class="slot-text">已发货数量：{{val.deliveryNum}}</text>
										<text class="slot-text">发货数量：
											<!-- v-if="val.sendType == '30' || val.sendType == '40'" -->
											<!-- 	<span>
												<uni-easyinput style="width: 300rpx;display: inline-block;"
													:clearable='false' v-model="val.deliveryAmount"
													placeholder="请输入发货数量" @change="selCount(val)" />
											</span> -->
											<span>{{val.deliveryAmount}}</span>

										</text>
										<text class="slot-text">发货金额：￥{{val.deliveryAmount}}</text>
										<text class="slot-text">商品类型：
										<!-- 10-销售 20-赠品 30-赔付 -->
										{{val.orderProductType == 10?'销售':val.orderProductType == 20?'赠品':val.orderProductType == 30?'赔付':''}}
										</text>
									</view>
								</view>


							</template>

						</uni-list-item>
					</uni-list>


				</uni-section>
				<uni-section title="付款记录" type="line">
					<uni-list>
						<uni-list-item thumb-size="lg" v-for="(val,index) in orderFrom.deliveryDetailList" :key="index">
							<template v-slot:body>
								<view class="slot-box">
									<view class="slot-box-left">
										<img :src="val.imagePath" alt="" />
									</view>
									<view class="slot-box-right">
										<text class="slot-text">商品名称：{{val.productName}}</text>
										<text class="slot-text">
											商品规格：
											<!-- <template v-if="val.sendType == '40'">
												<span
													v-for="(item, index) in val.productAttr && ((val.productAttr.split(';')).splice(0, 2))"
													:key="index">
													{{ item.split(":")[0] + ':' }}
													<uni-tag :inverted="true" :text='item.split(" :")[1]'
														type="primary" />
												</span>
												<span style="display: block;margin: 2px 0px;">颜 色：<uni-tag
														style="margin: 0 2px;" :key="_index"
														v-for="(cor,_index) in val.colorList"
														@click="tagClick(val, cor)" :inverted="false" :text="cor.color"
														:type="cor.check && 'primary'"></uni-tag></span>
											</template> -->
											<span>{{val.productAttr}}</span>
										</text>
										<text class="slot-text">商品价格：￥{{val.productAmount}}</text>
										<text class="slot-text">购买数量：{{val.totalNum}}</text>
										<text class="slot-text">总 价：￥{{val.totalAmount}}</text>
										<text class="slot-text">已发货数量：{{val.deliveryNum}}</text>
										<text class="slot-text">发货数量：
											<!-- v-if="val.sendType == '30' || val.sendType == '40'" -->
											<!-- 	<span>
												<uni-easyinput style="width: 300rpx;display: inline-block;"
													:clearable='false' v-model="val.deliveryAmount"
													placeholder="请输入发货数量" @change="selCount(val)" />
											</span> -->
											<span>{{val.deliveryAmount}}</span>

										</text>
										<text class="slot-text">发货金额：￥{{val.deliveryAmount}}</text>
									</view>
								</view>


							</template>

						</uni-list-item>
					</uni-list>

				</uni-section>
				<uni-forms v-if="orderFrom.auditBtn" ref="auditFrom" label-width="200rpx" label-align='right'
					:rules="auditFromRules" :modelValue="auditFrom">

					<uni-forms-item label="审批结果" required>
						<uni-data-select :clear='false' v-model="auditFrom.auditStatus" :localdata="auditList"
							placeholder="请选择审批结果"></uni-data-select>
					</uni-forms-item>


					<uni-forms-item label="审核意见" required>
						<uni-easyinput :clearable='false' v-model="auditFrom.auditReason" placeholder="请输入审核意见" />
					</uni-forms-item>

				</uni-forms>

				<br />
				<view class="button-group" v-if="orderFrom.auditBtn && orderFrom.status == '10'">
					<button type="primary" size="mini" :loading="saveLoading" @click="auditFromSave()">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				// 发货
				orderFrom: {},
				auditFrom: {},
				orderProduct: [],
				auditFromRules: {
					auditStatus: {
						rules: [{
								required: true,
								errorMessage: '请选择审批结果',
							},

						],

					},
					auditReason: {
						rules: [{
								required: true,
								errorMessage: '请输入审核意见',
							},

						],

					},
				},
				saveLoading: false,
				auditList: [{
						value: '10',
						name: '同意'
					},
					{
						value: '20',
						name: '拒绝'
					},
				],
				// 发货人
				deliveryUserNameRange: [],
				statusList: [{
						value: 10,
						name: '审核中'
					},
					{
						value: 20,
						name: '待付款'
					},
					{
						value: 30,
						name: '付款审批'
					},
					{
						value: 40,
						name: '待提货'
					},
					{
						value: 50,
						name: '已提货'
					},
					{
						value: 60,
						name: '审批拒绝'
					},
				],
				deliveryTypeRange: [{
					name: '门店自提',
					value: 20
				}, ],
				items: [{
						value: '1',
						name: '全部发货'
					},
					{
						value: '2',
						name: '部分发货',

					},
				],
				current: 0,
				courierNumber: '',
				courierCompany: '',
				status: 4,
				array: [],
				index: 0,
				express_order: '',
				value1: '',
				orderDeliveryId: '',
				expressOption: [],
				diliform: {
					allDelivery: true,
					expressId: '',
					expressNo: '',
					orderId: '',
					productList: []
				},
				orderType: 0, //订单类型
				isClickRow: false
			}
		},
		onLoad: function(option) {
			this.orderDeliveryId = option.orderDeliveryId
			// this.getCourier(option.orderId)
			this.deliveryDetailFun();
		},
		methods: {
			// 修改数量计算金额
			selCount(row) {
				this.api.deliveryCalc({
					orderProductId: row.orderProductId,
					productSkuId: row.productSkuId,
					deliveryNum: row.deliveryCount
				}, true).then(res => {
					console.log(res, 'res')
					const {
						code,
						data
					} = res;
					row['deliveryAmount'] = data;
					// 计算总金额
					let Count = 0;
					this.orderProduct.map(val => {
						Count += Number(val.deliveryAmount || '');
					})
					console.log(Count, 'Count')
					this.orderFrom.deliveryTotalAmount = Count - Number(this.orderFrom.depositOutAmount);
				}).catch(e => {})
			},
			auditFromSave() {

				this.$refs.auditFrom.validate().then(res => {

					this.saveLoading = true;
					this.auditFrom['deliveryFlowId'] = this.orderDeliveryId
					this.api.deliveryAudit(this.auditFrom, true).then(res => {
						const {
							code,
							data
						} = res;
						if (code == 1) {
							this.tui.toast('提交成功')
							// 重新刷新详情
							this.deliveryDetailFun();
						}
						this.saveLoading = false
					})

				})

			},
			tagClick(row, cor) {
				row.colorList.map(val => val.check = false)
				cor.check = !cor.check;
				if (cor.check) {
					row.productSkuId = cor.productSkuId
					row.productAttr = cor.productAttr
				}
			},
			// 前端删除
			delRow(row) {
				const set1 = new Set([row].map(item => item['rowID']))
				const set2 = new Set(this.orderProduct.map(item => item['rowID']))
				const diff = [
					...[row].filter(item => !set2.has(item['rowID'])),
					...this.orderProduct.filter(item => !set1.has(item['rowID']))
				]
				this.orderProduct = diff;
			},
			// 超量超规格发货
			async copyRow(row, type) {
				// sendType "正常发货" type:20 "超量发货" type:30 "超规格发货" type:40
				this.isClickRow = true
				let _row = JSON.parse(JSON.stringify(row))
				_row['rowID'] = this.generateRandomLetterArray();
				_row['sendType'] = type;
				// 超规格
				if (type == '40') {
					await this.skuList(_row, row.productId);
				}
				this.orderProduct.push(_row);

			},
			// 获取规格
			skuList(_row, productId) {
				this.api.skuList({
					productId
				}).then(res => {
					const {
						code,
						data
					} = res.data;
					console.log(data, 'data-----')
					_row['colorList'] = data
					//默认选择第一个
					_row['colorList'][0]['check'] = true;
					_row['productSkuId'] = data[0]['productSkuId']
					this.orderProduct = JSON.parse(JSON.stringify(this.orderProduct))

				})
			},
			// 发货详情
			deliveryDetailFun() {
				let Params = {
					deliveryId: this.orderDeliveryId
				}
				this.api.deliveryDetail(Params).then(res => {
					console.log(res, 'res++++')
					const {
						code,
						data
					} = res.data
					if (code === 1) {
						console.log('data', data)
						this.orderFrom = data;
					}
				})
			},
			// 前端随机生成id
			getRandomLetter() {
				const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
				return letters.charAt(Math.floor(Math.random() * letters.length));
			},

			generateRandomLetterArray(length = 10) {
				const randomLetterArray = [];
				for (let i = 0; i < length; i++) {
					randomLetterArray.push(this.getRandomLetter());
				}
				return randomLetterArray.join("");
			},


		}
	}
</script>

<style lang="less" scoped>
	.delivery-courier {
		background: #F9F9F9;
	}

	.slot-box {
		display: flex;
		align-items: center;
		gap: 20rpx;
		color: #606266;
		font-size: 28rpx;

		.slot-box-left {
			width: 100rpx;
			height: 100rpx;

			img {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.slot-box-right {
			display: flex;
			flex-wrap: wrap;

			.slot-text {
				display: block;
				width: 100%;
				margin: 3px 0px;
			}
		}
	}

	.split-line {
		width: 100%;
		height: 20rpx;
		background-color: #F9F9F9;
	}

	.courier-number {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		padding-left: 30rpx;
		line-height: 100rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-bottom: 10rpx;

		.radio-group {
			display: inline-block;

			view {
				display: inline-block;

			}

			.radio {
				margin-left: 30rpx;
			}

			.name {
				margin-right: 50rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.courier-box {
		width: 100%;
		height: 200rpx;
		background: #FFFFFF;

		.courier {
			display: flex;
			width: 690rpx;
			margin: 0 auto;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;

			input {
				height: 100rpx;
				margin-left: 20rpx;
				color: #333333;

				.input-placeholder {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.order-num {

			border-bottom: 2px solid #EEEEEE;
			box-sizing: border-box;
		}
	}

	.next-btn {
		width: 630rpx;
		height: 96rpx;
		background: #077840;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		line-height: 96rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
	}

	.comp {
		margin-right: 22rpx;
	}

	.goods_detail {
		padding: 0 30rpx;

		.goods_detail_item {
			// width: 100%;
			display: flex;
			padding: 30rpx;
			flex-direction: column;
			background: #FFFFFF;

			.goods_detail_item_order_title {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}

			.goods_detail_item_gooods_name {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				margin-top: 20rpx;
			}

			.goods_detail_item_shipments_number {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				margin-top: 40rpx;

			}

			.goods_detail_item_shipments_import {
				height: 50rpx;
				padding-bottom: 10rpx;
				border-bottom: 2rpx solid #EEEEEE;
				margin-top: 20rpx;
			}

			.goods_detail_item_extra {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				margin-top: 40rpx;

			}

			.goods_detail_item_extra_number {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				margin-top: 20rpx;

			}
		}
	}
</style>